<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab+滚动效果</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<style>
	.hceg{
		width:120px;
		height:20px;
		line-height: 20px;
		text-align: center;
	}
</style>
</head>
<body>

	<!-- <div class="slideTxtBox0"> -->
	
		<!--<div class="hd">
			<ul>
				<li>大众 高尔夫</li>
				<li>大众 新宝来</li>
				<li>大众 朗逸</li>
				<li>大众 迈腾</li>
			</ul>
			<div class="btn">
				<div class="prev"></div>
				<div class="next"></div>
			</div>
		</div>-->
		
		<!-- <div class="bd1"> -->
		
			<!--<div id="leftMarquee" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true});</script>
			</div>-->
			
			<!--<div id="leftMarquee11" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee11").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true });</script>
			</div>-->

			<div id="leftMarquee22" class="infoList" style="height:60px;background:pink;">
				<div class="bdr" style="height:100%;background:pink;">
					<ul style="height:100%;overflow: hidden;">
						<li class="hceg">一汽大众 高尔夫1</li>
						<li class="hceg">一汽大众 高尔夫2</li>
						<li class="hceg">一汽大众 高尔夫3</li>
						<li class="hceg">一汽大众 高尔夫4</li>
						<li class="hceg">一汽大众 高尔夫5</li>
						<li class="hceg">一汽大众 高尔夫6</li>
					</ul>
				</div>
				<button class="click">点击</button>
				<button class="click1">点击</button>

			<script type="text/javascript"></script>
			</div>

			<!--<div id="leftMarquee33" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee33").slide({mainCell:".bdr ul",effect:"topMarquee",vis:5,interTime:40,autoPlay:true });</script>
			</div>-->
		<!-- </div> -->
	<!-- </div> -->

	<script type="text/javascript">

//		$(".slideTxtBox2").slide();
		// $("#leftMarquee22").slide({mainCell:".bdr ul",effect:"topMarquee",vis:5,interTime:40,autoPlay:true });
				// $(".bdr >ul").remove();
		$(".click").click(function(){
			// debugger;
			var str =`
				<ul style="height:60px;overflow: hidden;background:red;"><li class="hceg">一汽大众 高尔夫0</li>
				<li class="hceg">一汽大众 高尔夫0</li>
				<li class="hceg">一汽大众 高尔夫0</li>
				<li class="hceg">一汽大众 高尔夫0</li>
				<li class="hceg">一汽大众 高尔夫0</li>
				<li class="hceg">一汽大众 高尔夫0</li></ul>
			`;
			$(".bdr >ul").remove();
			// debugger;
			$(".bdr").html(str);
			$("#leftMarquee22").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:3,interTime:40,autoPlay:true });
		})
		$(".click1").click(function(){
			// debugger;
			var str =`
				<ul style="height:60px;overflow:hidden; background:red;"><li class="hceg">一汽大众 高尔夫1</li>
				<li class="hceg">一汽大众 高尔夫1</li>
				<li class="hceg">一汽大众 高尔夫1</li>
				<li class="hceg">一汽大众 高尔夫1</li>
				<li class="hceg">一汽大众 高尔夫1</li>
				<li class="hceg">一汽大众 高尔夫1</li></ul>
			`;
			$(".bdr >ul").remove();
			// debugger;
			$(".bdr").html(str);
			$("#leftMarquee22").slide({mainCell:".bdr ul",effect:"topMarquee",vis:5,interTime:40,autoPlay:true });
		})
	</script>

</body>
</html>